<template>
 <div>
  <h1>组件包裹</h1>
  <div>
    用户切换
    <el-select v-model="value" placeholder="请选择">
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"
        @click="changeUser(item)" />
    </el-select>
  </div>
  <div class="mb-4">
    <Permission :permission="'sys:user:add'">
      <el-button type="primary">添加</el-button>
    </Permission>
    <Permission :permission="'sys:user:edit'">
      <el-button type="success">修改</el-button>
    </Permission>
    <Permission :permission="'sys:user:del'">
      <el-button type="danger">删除</el-button>
    </Permission>
  </div>
 </div>

 <div>
    <h2>自定义指令</h2>
      <el-button v-auth="'sys:user:add'" type="primary">添加</el-button>
      <el-button v-auth="'sys:user:edit'"  type="success">修改</el-button>
      <el-button v-auth="'sys:user:del'"  type="danger">删除</el-button>
 </div>
</template>
<script setup>
import { ref } from 'vue'
import Permission from './components/Permission.vue'
import eventBus from './eventBus';
const value = ref({
  value: '用户1',
  label: '用户1',
  permission: [
   'sys:user:add','sys:user:edit','sys:user:del'
  ]
})
const options = ref([
  {
    value: '用户1',
    label: '用户1',
    permission: [
     'sys:user:add','sys:user:edit'
    ]
  },
  {
    value: '用户2',
    label: '用户2',
    permission: [
      'sys:user:add','sys:user:del'
    ]
  },
  {
    value: '用户3',
    label: '用户3',
    permission: [
      'sys:user:edit','sys:user:del'
    ]
  }
])
import { usePermissionStore } from '../src/store/permissionStore';
const permissionStore = usePermissionStore();
const { changePermissions } = permissionStore;
const changeUser = (item) => {
  value.value = item
  eventBus.emit('user-changed', item.permission); // 发送事件
  changePermissions(item)
}
</script>
<style scoped>
/* 你的样式 */
</style>